﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>矫正人员季度报表</title>
<head>
<script type="text/javascript" src="/static/static_js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/echarts/dist/echarts.js"></script>
<script type="text/javascript" src="/static/echarts/theme/dark.js"></script>
<script src="/static/static_js/echarts.common.min.js"></script>
</head>
<style type="">
	div{
		margin: 0 auto;
	}
</style>
</head>
<body>
	
	<table width="100%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left"	background="/static/images/b2.jpg">
				<img src="/static/images/b1.jpg" width="10" height="26" />
			</td>
			<td width="68%" background="/static/images/b2.jpg">
				<table width="160" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left">
							<img src="/static/images/tz.gif" width="10" height="16" />
						</td>
						<td width="110" align="left" class="biao">矫正人员季度报表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="/static/images/b2.jpg">
				<img src="/static/images/b3.jpg" width="9" height="26" />
			</td>
		</tr>
	</table>
    <div style="height:100px;width:1700px">
        <br/>
        报表统计类型选择：
        <select id="xuanze" onchange="show_xuanze()">
            <option value="1">矫正人员统计</option>
            <option value="2">犯罪类型统计</option>
        </select>
    </div>
    <div id="main" style="height:500px;width:1200px"></div>
    <div id="main2" style="height:500px;width:1200px;display: none"></div>
    <div id="titile1"><center>矫正人员季度报表<br />(新入娇人数,入矫结束人数,目前在矫人数)</center></div>
    <div id="titile2" style="display: none"><center>犯罪类型季度报表<br />(抢劫罪,重大交通事故罪,危害国家安全罪,盗窃罪,其它)</center></div>
<script type="text/javascript">


    //获得后台数据
    var category;//类别
    var newCorrectCount;//新入娇人数
    var oldCorrectCount;//入矫结束人数
    var correctedCount;//目前在矫人数
    var robberyCount; //抢劫数量
    var theftCount; //盗窃数量
    var killCount; //杀人数量
    var securityCount; //社会安全罪数量
    var trafficCount; //交通罪数量
    var otherCrimeCount; //其他数量
    var quarterName;//图例
    $.ajax({
        url:'/echarts/quarterView',
        async:false,//默认为异步，值为true，这里设置为false意为使用同步的方式进行提交
        dataType: "json",
        cache: false,//默认使用缓存，值为true，这里设置为false意为不使用缓存
        success: function(data){
            category=data.category;
            newCorrectCount=data.newCorrectCount;
            oldCorrectCount=data.oldCorrectCount;
            correctedCount=data.correctedCount;

            robberyCount=data.robberyCount;
            theftCount=data.theftCount;
            killCount=data.killCount;
            securityCount=data.securityCount;
            trafficCount=data.trafficCount;
            otherCrimeCount=data.otherCrimeCount;

            quarterName=data.quarterName;

            console.log(robberyCount);
            console.log(theftCount);
            console.log(killCount);
            console.log(securityCount);
            console.log(trafficCount);
            console.log(otherCrimeCount);
            console.log(quarterName);
        }
    })

    // 路径配置
    require.config({
        paths: {
            echarts: '/static/echarts/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/bar' ,// 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line',
                'echarts/chart/pie'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                var myChart2 = ec.init(document.getElementById('main2'));
                option = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show : true,
                        orient:'vertical',
                        x:'right',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    legend: {
                        /*orient : 'vertical',//垂直分布
                        x : 'left',*/
                        orient : 'horizontal',//水平分布
                        data:[quarterName[0],quarterName[1],quarterName[2]]
                    },
                    xAxis : [
                        {
                            type : 'category',
                            splitLine : {show : false},
                            data : category
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            splitLine : {show : false},
                            position: 'left'
                        }
                    ],
                    series : [
                        {
                            name:'新入矫人数',
                            type:'bar',
                            data:newCorrectCount
                        },
                        {
                            name:'入矫结束人数',
                            type:'bar',
                            data:oldCorrectCount
                        },
                        {
                            name:'目前在矫人数',
                            /*type:'line',*/
                            type:'bar',
                            data:correctedCount
                        }
                    ]
                };

                option2 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    calculable : true,
                    legend: {
                        data:[quarterName[3],quarterName[4],quarterName[5],quarterName[6],quarterName[7],quarterName[8]]
                    },
                    toolbox: {
                        show : true,
                        orient:'vertical',
                        x:'right',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : category
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'抢劫罪',
                            type:'bar',
                            stack: '普通犯罪',
                            data:robberyCount
                        },
                        {
                            name:'故意杀人罪',
                            type:'bar',
                            stack: '普通犯罪',
                            data:killCount
                        },
                        {
                            name:'盗窃罪',
                            type:'bar',
                            stack: '普通犯罪',
                            data:theftCount
                        },
                        {
                            name:'危害国家安全罪',
                            type:'bar',
                            data:securityCount
                        },
                        {
                            name:'重大交通事故罪',
                            type:'bar',
                            data:trafficCount
                        },
                        {
                            name:'其它',
                            type:'bar',
                            data:otherCrimeCount
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
                myChart2.setOption(option2);
            }
    );

    var xuanzeValue;
    var xuanzeOption;
   function show_xuanze() {
       xuanzeValue=$("#xuanze").val();
       xuanzeOption=$("#xuanze option:selected").text();
       if(xuanzeValue==2){
           $("#main").attr("style", "display: none");
           $("#titile1").attr("style", "display: none");
           $("#main2").attr("style", "display: block");
           $("#titile2").attr("style", "display: block");
       }else{
           $("#main").attr("style", "display: block");
           $("#titile1").attr("style", "display: block");
           $("#main2").attr("style", "display: none");
           $("#titile2").attr("style", "display: none");
       }
   }
</script>
</body>
</html>